<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<title>Smart Music</title>

<link rel="icon" href="./resources/img/favicon.ico"
	type="image/x-icon" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/musicai/resources/css/all.css">
<link rel="stylesheet" type="text/css" href="/musicai/resources/css/my.css">
<script type="text/javascript" src="/musicai/resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/musicai/resources/js/checklogin.js"></script>
<script type="text/javascript" src="/musicai/resources/js/logout.js"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				var keyword = $("#resultkeyword").text();
				var linkimg = $(".linkimg");
				var linktitle = $(".linktitle");
				var pageno = $("#pageno").text();
				var sheight = screen.height - 70;
				var swidth = screen.width - 10;
				$("#play").click(
						function() {
							window.open("/musicai/player?keyword=" + keyword
									+ "&pageno=" + pageno + "");
						});
				linkimg.each(function() {
					var id = $(this).parent().attr('id');
					$(this).click(
							function() {
								window.open("/musicai/player?keyword=" + keyword
										+ "&id=" + id + "&pageno=" + pageno
										+ "");
							});
				});
				linktitle.each(function() {
					var id = $(this).parent().attr('id');
					$(this).click(
							function() {
								window.open("/musicai/player?keyword=" + keyword
										+ "&id=" + id + "&pageno=" + pageno
										+ "");
							});
				});
				
				var hisUrl = window.location.href;
				$("#login_a").click(
						function(){
							window.location.href="/musicai/account/login?url="+hisUrl;
						});
			});
</script>

</head>
<body>

	<div id="page">
		<div id="header-container">
			<div id="header">
				<a id="logo-container" href="/musicai"> <img id="logo"
					style="border: 0;" src="/musicai/resources/img/logo2.png"> </a>
				<div id="search-bar">
					<div id="search-form-login-div">
						<div id="login_div">
							<c:if test="${sessionScope.user != null }">
							    <a href="\" target="_blank">${sessionScope.user }</a><span
								class="masthead-link-separator">|</span>
								<a href="#" id="logout_a">退出</a>
							</c:if>
							<c:if test="${sessionScope.user == null }">
								<a href="/musicai/account/apply" target="_blank">创建账户</a><span
									class="masthead-link-separator">|</span><a id="login_a" href="#">登录</a>
							</c:if>
						</div>
						<div id="search_form_div">
							<form id="search-form" action="/musicai/result">
								<button id="search-button" type="submit" value="Search">
									<span class="yt-uix-button-content"></span>
								</button>
								<div id="masthead-search-terms">
									<input class="textinput" name="qword" type="text"
										value="${qword}" autocomplete="off">
									<input name="page" value="1" hidden="true">
								</div>
							</form>
						</div>
					</div>
						<div id="cata_bar">
							关键字:
							<a href="/musicai/result/庄严/1">庄严</a>
							<a href="/musicai/result/世界杯/1">世界杯</a>
							<a href="/musicai/result/想哭 伤感/1">想哭 伤感</a>
							<a href="/musicai/result/光棍/1">光棍</a>
							<a href="/musicai/result/红歌/1">红歌</a>
							<a href="/musicai/result/失恋/1">失恋</a>
							<a href="/musicai/result/空灵/1">空灵</a>
							<a href="/musicai/result/迪吧/1">迪吧</a>
							<a href="/musicai/result/沧桑/1">沧桑</a>
							<a href="/musicai/result/孤独/1">孤独</a>
							<a href="/musicai/result/激昂/1">激昂</a>
							<a href="/musicai/result/情人/1">情人</a>
							<a href="/musicai/result/感动/1">感动</a>
						</div>

				</div>
			</div>
		</div>
		<div id="content-container">
			<div id="content">
				<h3>
					搜索结果: <span id="resultkeyword" style="display: none">${qword}</span>
					<span id="pageno" style="display: none">${pageno}</span>
				</h3>
				<div style="width: 100%; height: 27px;">
					<a id="play" type="button" style="float: right; margin-top: 8px;">全部播放</a>
					<label style="margin-bottom: 5px; line-height: 27px;">
						共找到${rs.length}个结果, 花费${rs.time}毫秒 </label>

				</div>
				<div id="searchresult">
				<div id="items">
					<c:forEach var="song" items="${rs.song_list}">
							<ul class="video" id="${song.id}">
							<li class="linkimg"><a><img alt=""
									src="${song.imagelink}"> </a> <span id="file"
								style="display: none">${song.url}</span></li>
							<li class="linktitle"><a>${song.title}</a></li>
							<li class="linkduration"><span>时长:
							${song.duration}</span></li>
							</ul>
					</c:forEach>
				</div>
					
				</div>
				<div id="nextpagecontainer">${pagelink}</div>
			</div>

		</div>
		<div id="footer-container">
			<div id="footer"></div>

		</div>
	</div>
</body>
</html>

